<template>
	<div>
		<el-dialog title="找回密码" v-model="dialogVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
			<div class="container">
				<p>用户：{{ email }}, 您好</p>
				<p>请在下方输入您的新密码</p>
				<p>此请求仅可提交一次，在完成修改前请勿刷新或关闭此页面</p>
				<b>
					会话将于
					<b style="color: red;">{{ expireDate }}</b>
					过期
				</b>
				<el-form :model="resetForm" ref="resetForm" label-position="left" label-width="200px" :rules="resetFormRules">
					<el-form-item label="输入您的新密码：" prop="password"><el-input type="password" v-model="resetForm.password"></el-input></el-form-item>
					<el-form-item label="请再次输入您的密码：" prop="checkPassword"><el-input type="password" v-model="resetForm.checkPassword"></el-input></el-form-item>

					<el-button type="danger" @click="cancel">取消</el-button>
					<el-button type="primary" @click="submitForm('resetForm')">提交</el-button>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { doReset } from '@/api/common';
import router from '@/route';
import jwt from 'jsonwebtoken';
export default {
	data() {
		return {
			dialogVisible: true,
			email: sessionStorage.getItem('email') || '', // 添加 || '' 避免 email 为空
			visited: '',
			resetForm: {
				password: '',
				checkPassword: ''
			},
			expireDate: '',

			resetFormRules: {
				password: [{ min: 6, message: '密码长度不能小于6位', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' }],
				checkPassword: [
					{
						validator: (rule, value, callback) => {
							if (value !== this.resetForm.password) {
								callback(new Error('两次输入的密码不一致，请重新输入'));
							} else {
								callback();
							}
						},
						required: true,

						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					const param = { email: this.email, password: this.resetForm.password, token: sessionStorage.getItem('R-TOKEN') };
					doReset(param)
						.then(resp => {
							// 密码重置成功
							if (resp.success) {
								this.dialogVisible = false;
								ElMessage.success('密码重置成功！');
							}
							router.push('/');
						})
						.catch(err => {
							// 密码重置失败
							ElMessage.error('密码重置失败：' + err.message);
						});
				} else {
					// 表单验证不通过，提示错误信息
					ElMessage.warning('请正确填写表单！');
				}
			});
		},
		cancel() {
			// 使用 el-message-box 替代 confirm 对话框
			ElMessageBox.confirm('将不可逆的取消操作，是否确定？', '取消修改', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					// 用户点击了确定按钮
					this.dialogVisible = false;
					ElMessage.warning('操作已取消！');
				})
				.catch(() => {});
		}
	},
	mounted() {
		this.email = sessionStorage.getItem('email');
		var resetToken = sessionStorage.getItem('R-TOKEN');
		this.expireDate = new Date(jwt.decode(resetToken).exp * 1000).toLocaleString();

		this.visited = sessionStorage.getItem('visited');
		if (!sessionStorage.getItem('visited')) {
			sessionStorage.setItem('visited', true);
		}

		// 绑定 window.onbeforeunload 事件
		window.onbeforeunload = () => {
			// 如果用户已经访问过 Reset 组件，则弹出确认对话框
			if (sessionStorage.getItem('visited') === 'true') {
				return '您确定要离开此页面吗？';
			}
		};
	},
	created() {},

	beforeDestroy() {
		this.dialogVisible = false;
		window.onbeforeunload = null;
		// sessionStorage.removeItem('visited');
	}
};
</script>

<style>
body {
	background-color: #f2f2f2;
	font-family: Arial, sans-serif;
}

.container {
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.error {
	color: red;
	font-size: 1rem;
	margin-top: 10px;
	margin-bottom: 10px;
	align-self: center;
}
</style>
